<template>
  <div style="margin: 8px 8px ;">
    <div class="opt-area-02">
      <div class="right-con">
        <select-info ref="selectInfo" @callBack="callBack"></select-info>
      </div>
      <div class="right-con">
        <div class="input-frame" style="width: 164px">
          <Input type="text" placeholder="请输入姓名" style="width: 164px" v-model="params.XM"/>
        </div>
        <div class="input-frame" style="width: 164px">
          <Input type="text" placeholder="请输入身份证号" style="width: 164px" v-model="params.ZJHM"/>
        </div>
        <div class="input-frame" style="width: 164px">
          <Input type="text" placeholder="请输入联系方式" style="width: 164px" v-model="params.SJH"/>
        </div>
        <Button class="table-action-btn" type="info" @click="init(1)">搜索</Button>
        <Button type="info" v-show="severUserInfo.company_grade === '3'" :loading="loadinge" @click="exportData()" style="margin-top: 0px;margin-right:10px">导出</Button>
      </div>
      <div v-if="lie.length > 0" class="right-con" style="float: left;display: block">
        <div class="input-frame" style="width: 164px;float: left;margin-bottom: 5px" v-for="item in lie" :key="item" >
          <Select :placeholder=" '第' + parseInt(item.replace('lun_', '')) + '是否核酸检测'" v-model="params.columnsMap[item]" style="width:164px" >
            <Option value="0">
              <img :src="trueIocn" style="width: auto; height: auto" alt="..." class="head-img">
              已检</Option>
            <Option value="1">
              <img :src="falseIocn" style="width: auto; height: auto" alt="..." class="head-img">
              未检</Option>
          </Select>
        </div>
      </div>
    </div>
    <Table border ref="tableRef" :columns="columns" :data="tableData" :loading="loading">
      <template slot-scope="{ row, index }" slot="ZJHM">
        {{row.ZJHM? row.ZJHM.replace(/^(.{6})(?:\w+)(.{4})$/,
        "\$1******\$2"):""}}
      </template>
      <template slot-scope="{ row, index }" :slot="item" v-for="item in lie" >
        <div :key="item">
          <img  v-show="row[item] === '1'" :src="falseIocn" style="width: auto; height: auto" alt="..." class="head-img">
          <img  v-show="row[item] === '0'" :src="trueIocn" style="width: auto; height: auto" alt="..." class="head-img">
<!--          <span v-show="row[item] === '0'">已检</span>-->
<!--          <span v-show="row[item] === '1'">未检</span>-->
        </div>
      </template>
      <template slot-scope="{ row }" slot="caozuo">
        <Row style="margin-bottom: 5px; margin-top: 2px">
          <Button type="success" size="small" @click="showCz(row)" >处置信息</Button>
          <Button type="primary" size="small" style="margin-left: 5px" @click="showRcp(row)">核酸信息</Button>
        </Row>
      </template>
    </Table>
    <Page class="page_style" :total="totalnum" :current="currentPageNo"
          :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="changeSize" style="height: 30px;line-height: 30px;font-size: 12px;float:right;margin-top:5px" />
    <Drawer :title="drawer.title"  :width="drawer.width" :mask-closable="true" v-model="drawer.show">
      <Table border :columns="drawer.columns" :data="drawer.tableData" :loading="drawer.loading">
        <template slot-scope="{ row }" slot="caozuo">
          <Row style="margin-bottom: 5px; margin-top: 2px">
            <Button v-show="row.is_handle != '1' && severUserInfo.company_grade === '5'"  type="success" size="small" @click="openChuzhi(row)" >处置</Button>
          </Row>
        </template>
      </Table>
    </Drawer>
    <Modal width="400" v-model="chuzhi.isshow" title="添加处置信息">
      <Form :model="chuzhi.info" label-position="top">
        <FormItem>
          <template slot="label">
            <span class="red-star">*</span>处置类型：
          </template>
          <Select placeholder="请选择处置类型" v-model="chuzhi.info.handle_type">
            <Option value="6">离沈</Option>
            <Option value="1">使用他人健康码</Option>
            <Option value="2">其他机构检测</Option>
            <Option value="4">未检测</Option>
            <Option value="5">失联</Option>
            <Option value="7">参与本轮全员但未显示</Option>
            <Option value="3">其他情况</Option>
          </Select>
        </FormItem>
        <FormItem v-if="chuzhi.info.handle_type === '3'">
          <template slot="label">
            <span class="red-star">*</span>是否应检：
          </template>
          <RadioGroup v-model="chuzhi.info.is_should_test" type="button">
            <Radio label="1">应检</Radio>
            <Radio label="0">不应检</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem>
          <template slot="label">
            <span class="red-star">*</span>处置内容：
          </template><Input maxlength="100" show-word-limit type="textarea"  placeholder="请注明处置内容" v-model="chuzhi.info.handle_content"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="success" @click="addchuzhiinfo">保存</Button>
        <Button type="error" @click="chuzhi.isshow=false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getHspcSHPageList, getHspcSHCzList, getHspcSHRCPList, getHspcSHList } from '@/api/eventlist'
import SelectInfo from './components/select-info'
import trueIocn from '@/assets/images/true-iocn.png'
import falseIocn from '@/assets/images/false-iocn.png'
import { updateHandle } from '@/api/grid'
export default {
  name: 'index',
  components: {
    SelectInfo
  },
  data () {
    return {
      row: {},
      severUserInfo: {},
      chuzhi: {
        isshow: false,
        info: {}
      },
      loadinge: false,
      drawer: {
        title: '',
        type: '',
        show: false,
        columns: [],
        tableData: [],
        loading: false,
        width: 500
      },
      trueIocn,
      falseIocn,
      columns: [],
      tableData: [],
      loading: false,
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      lie: [],
      params: {
        select_type: 0,
        columnsMap: {}
      }
    }
  },
  computed: {
    // severUserInfo () {
    //   return this.$store.state.user.severUserInfo
    // }
  },
  methods: {
    exportData () {
      this.loadinge = true
      let data = this.params
      let row0 = this.tableData[0]
      let lie = []
      for (const key in row0) {
        if (key.startsWith('lun_')) {
          lie.push(key)
        }
      }
      lie = lie.sort((a, b) => parseInt(a.replace('lun_', '')) - parseInt(b.replace('lun_', '')))
      let columns = [
        { key: 'rownum', fixed: 'left', width: '80', title: '序号', align: 'center' },
        // { title: '区县', fixed: 'left', width: '80', key: 'qx_name', align: 'center' },
        { title: '街道', fixed: 'left', width: '150', key: 'jd_name', align: 'center' },
        { title: '社区', fixed: 'left', width: '190', key: 'SSSQMC', align: 'center' },
        { title: '小区', width: '150', key: 'residential', align: 'center' },
        { title: '网格', width: '150', key: 'garden', align: 'center' },
        { title: '楼', width: '70', key: 'building', align: 'center' },
        { title: '单元', width: '70', key: 'unit', align: 'center' },
        { title: '层', width: '70', key: 'floor', align: 'center' },
        { title: '户', width: '70', key: 'doorplate', align: 'center' },
        { title: '姓名', fixed: 'left', width: '90', key: 'XM', align: 'center' },
        { title: '证件号码', fixed: 'left', width: '200', key: 'ZJHM', align: 'center' },
        { title: '手机号', fixed: 'left', width: '120', key: 'SJH', align: 'center' }
      ]
      for (const key of lie) {
        columns.push({
          title: '第' + parseInt(key.replace('lun_', '')) + '轮', key: key, align: 'center', width: 80
        })
      }
      // columns.splice(5)
      getHspcSHList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$refs.tableRef.exportCsv({
            filename: '未检测核酸人员明细表',
            columns: columns,
            data: ret.data.data
          })
          this.loadinge = false
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
          this.loadinge = false
        }
      })
    },
    openChuzhi (row) {
      this.chuzhi.info = {
        ID: row.ID,
        hspc_table_name: row.hspc_table_name,
        handle_type: '',
        handle_content: ''
      }
      this.chuzhi.isshow = true
    },
    addchuzhiinfo () {
      if (!this.chuzhi.info.hspc_table_name) {
        this.$Notice.error({ title: '请选择轮次' })
        return
      }
      if (!this.chuzhi.info.handle_type) {
        this.$Notice.error({ title: '请选择处置类型' })
        return
      }
      if (this.chuzhi.info.handle_type === '3' && !this.chuzhi.info.is_should_test) {
        this.$Notice.error({ title: '请选择是否应检' })
        return
      }
      if (!this.chuzhi.info.handle_content) {
        this.$Notice.error({ title: '请填写处置内容' })
        return
      }
      if (this.chuzhi.info.handle_type !== '3') {
        this.chuzhi.info.is_should_test = ''
      }
      updateHandle(this.chuzhi.info).then(ret => {
        if (ret.data.errcode === 0) {
          this.chuzhi = {
            isshow: false,
            info: {}
          }
          this.$Notice.success({ title: '处置成功' })
          this.init()
          this.showCz(this.row)
        } else {
          this.$Notice.error({ title: '处置失败', desc: ret.data.errmsg })
        }
      })
    },
    showCz (e) {
      this.row = e
      this.drawer.loading = true
      this.drawer.title = '处置信息'
      this.drawer.width = 1000
      this.drawer.show = true
      this.drawer.columns = [
        { type: 'index', fixed: 'left', width: '80', title: '序号', align: 'center' },
        { title: '核酸轮次', key: 'hspc_table_name1', align: 'center' },
        { title: '处置状态', key: 'is_handle1', align: 'center' },
        { title: '处置类型', key: 'handle_type_name', align: 'center' },
        { title: '处置信息', key: 'handle_content', align: 'center' },
        { title: '处置时间', key: 'handle_time', align: 'center' },
        { title: '操作', slot: 'caozuo', width: 100, align: 'center' }
      ]
      let params = {}
      params.ZJHM = e.ZJHM
      getHspcSHCzList(params).then(res => {
        if (res.data.errcode === 0) {
          this.drawer.tableData = res.data.data
          for (const temp of this.drawer.tableData) {
            switch (temp.handle_type) {
              case '1':
                temp.handle_type_name = '使用他人健康码'
                break
              case '2':
                temp.handle_type_name = '其他机构检测'
                break
              case '3':
                temp.handle_type_name = '其他情况'
                break
              case '4':
                temp.handle_type_name = '未检测'
                break
              case '5':
                temp.handle_type_name = '失联'
                break
              case '6':
                temp.handle_type_name = '离沈'
                break
              case '7':
                temp.handle_type_name = '参与本轮全员但未显示'
                break
            }
            if (temp.hspc_table_name) {
              temp.hspc_table_name1 = '第' + parseInt(temp.hspc_table_name) + '轮'
            }
            if (temp.is_handle) {
              switch (temp.is_handle) {
                case '0':
                  temp.is_handle1 = '未处置'
                  break
                case '1':
                  temp.is_handle1 = '已处置'
                  break
              }
            }
          }
          this.drawer.loading = false
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: res.data.errmsg
          })
          this.drawer.loading = false
        }
      })
    },
    showRcp (e) {
      this.drawer.loading = true
      this.drawer.title = '核酸信息'
      this.drawer.show = true
      this.drawer.width = 1000
      this.drawer.columns = [
        { type: 'index', fixed: 'left', width: '80', title: '序号', align: 'center' },
        { title: '采集人名称', key: 'patient_name', width: 80, align: 'center' },
        { title: '性别', key: 'sex_name', width: 80, align: 'center' },
        { title: '年龄', key: 'age', width: 80, align: 'center' },
        { title: '证件号码', key: 'idenno', width: 150, align: 'center' },
        { title: '采集人电话', key: 'mobile', width: 120, align: 'center' },
        { title: '标本类型', key: 'speci_type', align: 'center' },
        { title: '采集时间', key: 'cy_time', align: 'center' },
        { title: '采集点地址', key: 'census_address', align: 'center' }
      ]
      let params = {}
      params.idenno = e.ZJHM
      getHspcSHRCPList(params).then(res => {
        if (res.data.errcode === 0) {
          this.drawer.tableData = res.data.data
          for (const temp of this.drawer.tableData) {
            // eslint-disable-next-line no-useless-escape
            temp.idenno = temp.idenno ? temp.idenno.replace(/^(.{6})(?:\w+)(.{4})$/, '\$1******\$2') : ''
            switch (temp.sex) {
              case '1':
                temp.sex_name = '男'
                break
              case '2':
                temp.sex_name = '女'
                break
            }
          }
          this.drawer.loading = false
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: res.data.errmsg
          })
          this.drawer.loading = false
        }
      })
    },
    callBack (e) {
      // this.dataInfo.params = e
      let n = {}
      switch (e.grade) {
        case '5.5':
          n.residential_id = e.id
          n.community_id = e.community_id
          n.street_id = e.street_id
          break
        case '5':
          this.params.SSSQBM = e.id
          this.params.jd_id = e.parent_id
          break
        case '4':
          this.params.jd_id = e.id
          break
        case '3':
          this.params.qx_id = e.id
          break
        case '2':
          n.shi = e.id
          break
      }
      this.init()
      console.log(this.params, 'lllllll')
    },
    init () {
      this.loading = true
      if (Object.keys(this.params.columnsMap).length !== 0) {
        this.params.select_type = 1
      }
      getHspcSHPageList(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.tableData = res.data.data.results
          if (this.tableData && this.tableData.length > 0) {
            let row0 = this.tableData[0]
            let lie = []
            for (const key in row0) {
              if (key.startsWith('lun_')) {
                lie.push(key)
              }
            }
            lie = lie.sort((a, b) => parseInt(a.replace('lun_', '')) - parseInt(b.replace('lun_', '')))
            if (this.params.select_type === 0) this.lie = lie
            console.log(lie)
            this.columns = [
              { type: 'index', fixed: 'left', width: '80', title: '序号', align: 'center' },
              // { title: '区县', fixed: 'left', width: '80', key: 'qx_name', align: 'center' },
              { title: '街道', fixed: 'left', width: '150', key: 'jd_name', align: 'center' },
              { title: '社区', fixed: 'left', width: '190', key: 'SSSQMC', align: 'center' },
              { title: '小区', width: '150', key: 'residential', align: 'center' },
              { title: '网格', width: '150', key: 'garden', align: 'center' },
              { title: '楼', width: '70', key: 'building', align: 'center' },
              { title: '单元', width: '70', key: 'unit', align: 'center' },
              { title: '层', width: '70', key: 'floor', align: 'center' },
              { title: '户', width: '70', key: 'doorplate', align: 'center' },
              { title: '姓名', fixed: 'left', width: '90', key: 'XM', align: 'center' },
              { title: '手机号', fixed: 'left', width: '120', key: 'SJH', align: 'center' },
              { title: '证件号码', fixed: 'left', slot: 'ZJHM', width: '150', align: 'center' },
              { title: '操作', fixed: 'right', width: '200', slot: 'caozuo', align: 'center' }
            ]
            for (const key of lie) {
              this.columns.push({
                title: '第' + parseInt(key.replace('lun_', '')) + '轮', slot: key, align: 'center', width: 80
              })
            }
          }
          this.totalnum = res.data.data.totalRecord
          this.loading = false
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: res.data.errmsg
          })
          this.loading = false
        }
      })
    },
    changePageNo (pageNo) {
      this.currentPageNo = pageNo
      this.params.pageNo = pageNo
      this.init()
    },
    changeSize (pageSize) {
      this.currentPageSize = pageSize
      this.params.pageSize = pageSize
      this.changePageNo()
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
  }
}
</script>

<style scoped>
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}
.opt-area-02 .left-con span {
  font-weight: bold;
}
.opt-area-02 .right-con input {
  width: 164px;
  margin-right: 10px;
}
.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}
.table-action-btn {
  margin-right: 3px;
}
.page_style {
  margin-bottom: 5px;
}
.page_style .input-vaccines .ivu-select-single .ivu-select-selection {
  height: 50px;
  position: relative;
}
.page_style .ivu-select-selection .ivu-select-selected-value {
  display: block;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 24px;
}
.red-star {
  font-family: SimSun;
  color: #f00;
  margin-right: 4px;
}
#hengchuanselect1 .ivu-select-dropdown{
  max-height: 500px;
}
#hengchuanselect2 .ivu-select-dropdown{
  max-height: 500px;
}
#hengchuanselect3 .ivu-select-dropdown{
  max-height: 400px;
}
.ivu-form-inline .ivu-form-item {
  width: 100%;
}
.rowFa {
  min-height: 40px;
}
.colLelft,
.colRight {
  padding: 1px;

}
.colLeft {
  padding: 3px 0;
  text-align: center;
  line-height: 40px;
  background-color: rgba(0, 153, 255, 0.3);
}
.colRight {
  padding: 3px 0;
  text-indent: 2em;
  line-height: 40px;
  background-color: rgba(0, 153, 255, 0.1);

}
>>> .ivu-table-wrapper,>>> .ivu-table {
  overflow: initial;
}
</style>
